<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between;">
                <div>
                    <el-input
                            :disabled="showSearch"
                            placeholder="请输入员工姓名..."
                            prefix-icon="el-icon-search"
                            clearable
                            @clear="getAdiustSalaries"
                            size="small"
                            style="width: 300px;margin-right: 8px;"
                            @keydown.enter.native="getAdiustSalaries"
                            v-model="name"></el-input>
                    <el-button icon="el-icon-search" type="primary" size="small" @click="getAdiustSalaries" :disabled="showSearch">查询</el-button>
                    <el-button type="primary" size="small" @click="showSearch=!showSearch">
                        <i :class="showSearch?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
                        条件查询
                    </el-button>
                </div>
                <div>
                    <el-button icon="el-icon-circle-plus-outline" type="primary" size="small" @click="showAddView">新增员工调薪信息</el-button>
                </div>
            </div>
            <el-collapse-transition>
                <div v-show="showSearch" style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px">
                    <el-row>
                        <el-col :span="6">
                            <div style="display: inline-flex">
                                <el-tag type="warning" style="margin-top: 8px;margin-right: 5px">所属部门:</el-tag>
                                <el-popover
                                        placement="right"
                                        width="250"
                                        trigger="manual"
                                        v-model="popVisible">
                                    <div style="display: flex;justify-content: space-between ">
                                        <span>请选择部门</span>
                                        <i class="el-icon-close" style="margin-top: 2px" @click="popVisible=false"></i>
                                    </div>
                                    <el-tree
                                            :data="allDepartments"
                                            :props="defaultProps"
                                            default-expand-all
                                            @node-click="searchHandleNodeClick"></el-tree>
                                    <div slot="reference" @click="showDepartmentViewToAdvanced">
                                        <el-tag style="width:150px;height:30px;margin-top: 8px;background-color:white">{{selectdDepName}}</el-tag>
                                    </div>
                                </el-popover>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div style="display: flex;justify-content: flex-start;align-items: center;padding: 5px">
                                <el-tag type="warning" style="margin-right: 5px">工号:</el-tag>
                                <el-input size="small" v-model="searchParams.employee.jobNo" placeholder="请输入员工工号"></el-input>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div style="display: flex;justify-content: flex-start;align-items: center;padding: 5px">
                                <el-tag type="warning" style="margin-right: 5px">姓名:</el-tag>
                                <el-input size="small" v-model="searchParams.employee.name" placeholder="请输入员工姓名"></el-input>
                            </div>
                        </el-col>
                        <el-col :span="6" style="margin-top: 8px;display: flex;justify-content:center">
                            <el-button size="mini" @click="emptySearchParams">清空</el-button>
                            <el-button size="mini" icon="el-icon-search" type="primary" @click="getAdiustSalaries('advanced')">搜索</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-transition>

            <div style="margin-top: 10px">
                <el-table
                        v-loading="loading"
                        :data="adiustSalaries"
                        border
                        stripe
                        size="small"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="employee.name"
                            label="员工名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="employee.jobNo"
                            label="员工工号"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="employee.department.name"
                            label="部门名称"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="beforeSalary"
                            label="调前薪资"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="调整金额"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="afterSalary"
                            label="调后薪资"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="asDate"
                            label="调薪日期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="lostDate"
                            label="调薪终止日期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="remark"
                            label="备注"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            width="180"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="showEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="display: flex;justify-content: center;margin-top: 10px">
                    <el-pagination
                            background
                            @prev-click="prevClick"
                            @next-click="nextClick"
                            @size-change="sizeChange"
                            @current-change="currentChange"
                            layout="sizes, prev, pager, next, jumper, ->, total, slot"
                            :total="total">
                    </el-pagination>
                </div>
                <el-dialog
                        @close="viewClose"
                        :title="title"
                        :visible.sync="dialogVisible"
                        width="60%">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div style="display: flex;justify-content: flex-start;align-items: center">
                                <el-tag style="margin-right: 5px">员工工号:</el-tag>
                                <el-autocomplete
                                        class="inline-input"
                                        v-model="adiustSalary.employee.jobNo"
                                        :fetch-suggestions="querySearch"
                                        placeholder="请输入内容"
                                        :trigger-on-focus="false"
                                        @select="handleSelect"
                                        size="small"
                                ></el-autocomplete>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div>
                                <el-tag style="margin-right: 5px">员工名称:</el-tag>
                                <el-input
                                        readonly="readonly"
                                        size="small"
                                        placeholder="输入工号可以自动填充"
                                        style="width: 180px"
                                        v-model="adiustSalary.employee.name">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div>
                                <el-tag style="margin-right: 5px">部门:</el-tag>
                                <el-input
                                        readonly="readonly"
                                        size="small"
                                        placeholder="输入工号可以自动填充"
                                        style="width: 180px"
                                        v-model="adiustSalary.employee.department.name">
                                </el-input>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 10px">
                        <el-col :span="8">
                            <div style="display: flex;justify-content: flex-start;align-items: center">
                                <el-tag style="margin-right: 5px">调前薪资:</el-tag>
                                <el-input
                                        readonly="readonly"
                                        size="small"
                                        placeholder="输入工号可以自动填充"
                                        style="width: 180px"
                                        v-model="adiustSalary.beforeSalary">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div>
                                <el-tag style="margin-right: 5px">调薪金额:</el-tag>
                                <el-input
                                        size="small"
                                        placeholder="请输入调薪金额"
                                        style="width: 180px"
                                        v-model="adiustSalary.money">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div>
                                <el-tag style="margin-right: 5px">调后薪资:</el-tag>
                                <el-input
                                        readonly="readonly"
                                        size="small"
                                        placeholder="输入调薪金额可以自动填充"
                                        style="width: 180px"
                                        v-model="adiustSalary.afterSalary">
                                </el-input>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 10px">
                        <el-col :span="14"></el-col>
                        <el-col :span="10">
                            <div>
                                <el-tag style="margin-right: 5px">调薪终止日期:</el-tag>
                                <el-date-picker
                                        v-model="adiustSalary.lostDate"
                                        type="datetime"
                                        size="mini"
                                        align="center"
                                        style="width: 180px"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择调薪终止日期"
                                        default-time="12:00:00">
                                </el-date-picker>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 10px">
                        <el-col :span="16">
                            <div style="display: flex;justify-content: flex-start;">
                                <el-tag style="margin-right: 5px">备注:</el-tag>
                                <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 2, maxRows: 4}"
                                        placeholder="请输入备注"
                                        size="small"
                                        v-model="adiustSalary.remark">
                                </el-input>
                            </div>
                        </el-col>
                    </el-row>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="addAdiustSalary" size="small">确 定</el-button>
            </span>
                </el-dialog>
            </div>
        </div>
        <div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "PerSalary",
        data(){
            return{
                adiustSalaries:[],
                adiustSalary:{
                    id:null,
                    eid:null,
                    beforeSalary:0,
                    money:0,
                    afterSalary:null,
                    asDate:null,
                    lostDate:null,
                    remark:null,
                    employee:{
                        id:null,
                        name:null,
                        jobNo:null,
                        department:{
                            id:null,
                            name:null
                        },
                        salary:{
                            id:null,
                            allSalary:null
                        }
                    }
                },
                searchParams:{
                    employee:{
                        name:null,
                        departmentId: null,
                        jobNo:null
                    }
                },
                total: 0,
                pageNo: 1,
                pageSize: 10,
                loading: false,
                dialogVisible:false,
                title:'新增员工调薪信息',
                showSearch:false,
                selectdDepName:'请选择部门',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                name: "",
                allDepartments:[],
                popVisible:false,
                empjobNos:[]
            }
        },
        mounted() {
            this.getAdiustSalaries();
            this.getSelectData();
        },
        computed:{
            adiustSalary2:function () {
                return {
                    afterSalary:parseFloat(this.adiustSalary.beforeSalary)+parseFloat(this.adiustSalary.money)
                }
            }
        },
        watch:{
            "adiustSalary.money":function f() {
                this.adiustSalary.afterSalary = this.adiustSalary2.afterSalary;
            }
        },
        methods:{
            //Input框输入时进行后端接口请求，把结果集放到搜索建议中
            querySearch(queryString, cb) {
                this.empjobNos = [];
                this.getRequest("/personnel/salary/getempinfo/"+queryString).then(resp=>{
                    for (let item of resp) {
                        this.empjobNos.push({"value": item.jobNo,"eid":item.id});
                    }
                    var empjobNos = this.empjobNos;
                    var results = queryString ? empjobNos.filter(this.createFilter(queryString)) : empjobNos;
                    // 调用 callback 返回建议列表的数据
                    cb(results);
                })
            },
            //搜索建议过滤方法
            createFilter(queryString) {
                return (empjobNos) => {
                    return (empjobNos.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
                };
            },
            //当选择某一项建议时，自动填充后面的Input框内容
            handleSelect(item) {
                this.getRequest("/personnel/salary/getnewestsalary/"+item.eid).then(resp=>{
                    if(resp){
                        this.adiustSalary.eid = resp.eid;
                        this.adiustSalary.beforeSalary = resp.afterSalary;
                        this.adiustSalary.employee.name = resp.employee.name;
                        this.adiustSalary.employee.department.name = resp.employee.department.name;
                    }
                })
            },
            addAdiustSalary(){
                if(this.adiustSalary.id){
                    this.putRequest("/personnel/salary/",this.adiustSalary).then(resp=>{
                        if(resp){
                            this.getAdiustSalaries();
                        }
                    })
                }else{
                    this.postRequest("/personnel/salary/",this.adiustSalary).then(resp=>{
                        if(resp){
                            this.getAdiustSalaries();
                        }
                    })
                }
                this.dialogVisible = false;
            },
            //关闭对话框时，初始化数据源
            viewClose(){
                this.adiustSalary = {
                    id:null,
                    eid:null,
                    beforeSalary:0,
                    money:0,
                    afterSalary:0,
                    asDate:null,
                    lostDate:null,
                    remark:null,
                    employee:{
                        id:null,
                        name:null,
                        jobNo:null,
                        department:{
                            id:null,
                            name:null
                        },
                        salary:{
                            id:null,
                            allSalary:null
                        }
                    }
                };
            },
            showEdit(index,data){
                this.title = "修改员工调薪信息";
                this.adiustSalary = JSON.parse(JSON.stringify(data));
                this.dialogVisible = true;
            },
            handleDelete(index,data){
                this.$confirm('此操作将永久删除【' + data.employee.name + '】的调薪信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/personnel/salary/" + data.id).then(resp => {
                        if (resp) {
                            this.getAdiustSalaries();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //获取部门信息，并存储到浏览器缓存中
            getSelectData() {
                if (!window.sessionStorage.getItem("allDepartments")) {
                    this.getRequest("/personnel/salary/getalldepartments").then(resp => {
                        if (resp) {
                            this.allDepartments = resp;
                            window.sessionStorage.setItem("allDepartments", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.allDepartments = JSON.parse(window.sessionStorage.getItem("allDepartments"));
                }
            },
            //清空条件查询的内容
            emptySearchParams() {
                this.searchParams = {
                    employee:{
                        name:null,
                        departmentId: null,
                        jobNo:null
                    }
                };
                this.selectdDepName = '请选择部门';
                this.getAdiustSalaries();
            },
            //条件查询使用,打开树形选择界面
            showDepartmentViewToAdvanced(){
                this.popVisible = !this.popVisible;
            },
            //条件查询树中点击节点发生时的事件,传入该节点的部门信息
            searchHandleNodeClick(data){
                if(data.parent){
                    return;
                }
                this.selectdDepName = data.name;//将部门名称显示出来
                this.searchParams.employee.departmentId = data.id;//将选中的部门id放入查询对象中
                this.popVisible = !this.popVisible;//窗口关闭
            },
            showAddView(){
                this.title = "新增员工调薪信息";
                this.dialogVisible = true;
            },
            getAdiustSalaries(type) {
                this.loading = true;
                if (type && type == 'advanced') {
                    this.postRequest("/personnel/salary/searchadjustsalaries?pageNo=" + this.pageNo + "&pageSize=" + this.pageSize,this.searchParams).then(resp => {
                        this.loading = false;
                        if (resp) {
                            this.adiustSalaries = resp.data;
                            this.total = resp.total;
                        }
                    })
                } else {
                    this.getRequest("/personnel/salary/?pageNo=" + this.pageNo + "&pageSize=" + this.pageSize+'&employee.name='+this.name).then(resp => {
                        this.loading = false;
                        if (resp) {
                            this.adiustSalaries = resp.data;
                            this.total = resp.total;
                        }
                    })
                }
            },
            //点击下一页时的时候触发的函数，将页码改变，然后传参去后端获取数据
            nextClick(currentPage) {
                this.pageNo = currentPage;
                this.getAdiustSalaries();
            },
            //点击上一页时的时候触发的函数，将页码改变，然后传参去后端获取数据
            prevClick(currentPage) {
                this.pageNo = currentPage;
                this.getAdiustSalaries();
            },
            //点击页码的时候触发的函数，将页码改变，然后传参去后端获取数据
            currentChange(currentPage) {
                this.pageNo = currentPage;
                this.getAdiustSalaries();
            },
            //点击页数的时候触发的函数，将页数改变，然后传参去后端获取数据
            sizeChange(pageSize) {
                this.pageSize = pageSize;
                this.getAdiustSalaries();
            }
        }
    }
</script>

<style>
    body .el-table th.gutter {
        display: table-cell !important
    }
</style>
